<template>
	<!-- 运营系统-短剧配置 -->

	<d2-container class="d-flex flex-column">
		
		<template v-if="$hasPermission('playlet:appletCouponPromotionActivity:index')">
			<div class="d-flex j-sb" slot="header">
				<el-form class="d-flex b-s mt-2 mb-10" :inline="true" size="small" :model="dataForm"
					@keyup.enter.native="getTableList(true)" @submit.native.prevent>
					<el-form-item label="活动名称">
						<el-input v-model="dataForm.keyword" placeholder="活动名称" clearable />
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-search" type="primary"
							@click="getTableList(true)">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="success" icon="el-icon-circle-plus-outline" v-show="$hasPermission('playlet:appletCouponPromotionActivity:create')"
							@click="addOrUpdateData()">新增</el-button>
					</el-form-item>
				</el-form>
				<div class="d-flex">
					<vxe-toolbar ref="toolbarRef" custom :refresh="{ queryMethod: getTableList,code:'query' }"></vxe-toolbar>
				</div>
			</div>
			<div class="d-flex h-100 b-s flex-column">
				<div class="d-flex flex-1">
					<div class="overflow">
						<vxe-table ref="dataBackhaulSettingTable" key="dataBackhaulSettingTable" border height="100%" resizable size="medium"
							:loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}"
							:data="dataList">
							<vxe-column width="100" field="id" title="ID" sortable align="center"></vxe-column>
							<vxe-column width="180" field="activity_id" title="活动ID" sortable cell-type="string" align="center"></vxe-column>
							<vxe-column width="260" field="activity_name" title="活动名称" align="center"></vxe-column>
							<vxe-column width="260" field="applet_name" title="小程序名称" align="center"></vxe-column>
							<vxe-column width="130" field="status" title="状态" align="center">
								<template v-slot="{ row }">
									<div class="d-flex flex-row a-center j-center">
										<div class="d-flex font-weight" :class="row.status==1?'text-orange':row.status==2?'text-success':row.status==3?'text-danger':row.status==4?'text-yellow':'text-warning'" style="font-size: 17px;">
											{{row.status==1?'待上线':row.status==2?'在线':row.status==3?'下线':row.status==4?'审核中':'审核驳回'}}
										</div>
										<el-tooltip v-if="row.status==5" effect="dark" :content="row.error_msg" placement="top">
											<!-- <i class="el-icon-info text-orangedeep pointer ml-2 font-md"></i> -->
											<d2-icon class="d-flex text-danger pointer ml-2" style="font-size: 19px;margin-top: 2px;" name="exclamation-circle"/>
										</el-tooltip>
									</div>
								</template>
							</vxe-column>
							
							<vxe-column width="180" field="valid_begin_time" title="生效时间" sortable cell-type="string" align="center"></vxe-column>
							<vxe-column width="180" field="valid_end_time" title="过期时间" sortable cell-type="string" align="center"></vxe-column>
				
						
							<vxe-column v-if="!tableLoading||(dataList.length&&$hasPermissionNum(['playlet:appletCouponPromotionActivity:update','playlet:appletCouponPromotionActivity:delete','playlet:appletCouponPromotionActivity:updateStatus']))"
							title="操作" fixed="right" :width="$hasPermissionNum(['playlet:appletCouponPromotionActivity:update','playlet:appletCouponPromotionActivity:delete','playlet:appletCouponPromotionActivity:updateStatus'])*100" align="center" cell-class-name="py-10">
								<template v-slot="{ row }">
									<el-button size="small" round icon="el-icon-edit"
									v-if="$hasPermission('playlet:appletCouponPromotionActivity:update')"
									@click="addOrUpdateData(row)" type="primary">编辑</el-button>
									
									<el-button size="small" round icon="el-icon-edit"
									v-if="$hasPermission('playlet:appletCouponPromotionActivity:updateStatus') && row.status == 2"
									@click="updateMetaStatusFn(row)" type="warning">下线</el-button>
									<el-button size="small" round icon="el-icon-delete"
									v-if="$hasPermission('playlet:appletCouponPromotionActivity:delete')"
									@click="deleteHandleSetter(row)" type="danger">删除</el-button>
								</template>
							</vxe-column>
							<template #empty>
								<div class="d-flex flex-row a-center j-center font-md">
									<div class="d-flex">
										暂时没有数据~
									</div>
								</div>
							</template>
						</vxe-table>
					</div>
				</div>
			</div>
			<!-- 分页 -->
			<div class="d-flex" slot="footer">
				<vxe-pager background size="medium" align="right" :border="false" :pageSizes="[20,50,100,150,200]"
					:current-page="dataForm.page" :page-size="dataForm.pageSize" :total="total"  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
					@page-change="handlePageChange">
				</vxe-pager>
			</div>
			<!-- 新增/修改弹窗 -->
			<drawer-add-or-update v-if="dialog" ref="drawer" @close="closeDrawer" @getTableList="getTableList" />
			<drawer-add-or-update v-if="dialog2" ref="drawer2" @close="closeDrawer" @getTableList="getTableList" />
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<img class="d-flex b-s mt-2 mb-10" src="../../../public/image/download.png" alt="没有访问权限" style="width: 300px;">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
	</d2-container>
</template>

<script>
	import mixinViewModule from '@/mixins/view-module'
	import drawerAddOrUpdate from './drawer-add-or-update'
	export default {
		mixins: [mixinViewModule],
		components: {
			drawerAddOrUpdate
		},
		data() {
			return {
				id:null,
				dialog: false,
				dialog2:false,
      			loading: false,
				formLabelWidth: '1072px',
				tableLoading:false,
				total:0,
				// 增改
				dataList:[],
				dataForm: {
					page:1,
					pageSize:20,
					keyword: ''
				}
			}
		},
		created() {
			if(this.$hasPermission('playlet:appletCouponPromotionActivity:index')){
				this.getTableList();
			}
		},
		methods: {
			
			async getTableList(init=false){
				if(init&&typeof init =='boolean'){
					this.dataForm.page = 1;
				}
				this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/playlet/appletCouponPromotionActivity?'+this.$qs.stringify(this.dataForm))
				console.log(163,tableRes)
				this.tableLoading = false;
				this.dataList = tableRes.data;
				this.total = tableRes.total;
			},
			closeDrawer(){
				this.dialog = false
				this.dialog2 = false
			},
			//新增/修改弹窗
			async addOrUpdateData(row) {
				console.log(645,row)
				if (typeof row == 'object' && row!=null) {
					const id = row.id;
					const userRes = await this.$axios.get(`/api/playlet/appletCouponPromotionActivity/update/${id}`);
					this.dialog2 = true
					console.log(651, userRes)
					this.$nextTick(() => {
						this.$refs.drawer2.initData(userRes)
					})
				} else {
					this.id = null;
					this.dialog = true
					this.$nextTick( () => {
						this.$refs.drawer.initData()
						console.log(660)
					})
				}
			},

			//下线
			updateMetaStatusFn(row){
				console.log(221,row.status )
				
						this.$confirm(this.$t('public.prompt.info', {
						handle: row.status==2?'下线':'上线'
					}), this.$t('public.prompt.title'), {
						confirmButtonText: this.$t('views.public.confirm'),
						cancelButtonText: this.$t('views.public.cancel'),
						type: 'warning'
					}).then(() => {
						this.$axios.post(`/api/playlet/appletCouponPromotionActivity/updateStatus/${row.id}`,{status:row.status==2?3:2}
						).then(res => {
							this.$message({
								message: this.$t('views.public.success'),
								type: 'success',
								duration: 500,
								onClose: () => {
									this.getTableList()
								}
							})
						}).catch(() => {})
					}).catch(() => {})
			
			},
			// 删除
			deleteHandleSetter(row) {
				this.$confirm(this.$t('public.prompt.info', {
					handle: this.$t('views.public.delete')
				}), this.$t('public.prompt.title'), {
					confirmButtonText: this.$t('views.public.confirm'),
					cancelButtonText: this.$t('views.public.cancel'),
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`/api/playlet/appletCouponPromotionActivity/delete/${row.id}`,{}
					).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.getTableList()
							}
						})
					}).catch(() => {})
				}).catch(() => {})
			}
		}
	}
</script>

<style scoped>
	::v-deep  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    all: initial;
}
::v-deep  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after {
    content: '*';
    color: #F56C6C;
    margin-left: 4px;
}
::v-deep .el-form-item__label {
	font-size: 14px;
    font-weight: 600;
    line-height: 40px;
	color: rgba(28,31,35,1);
}
::v-deep .el-select-dropdown__item{
    font-size: 14px;
    padding: 10px 20px;
    position: relative;
    white-space: nowrap;
    overflow: initial;
    text-overflow: initial;
    color: #606266;
    height: 108px;
    line-height: 34px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
	border-bottom: 1px solid rgba(28, 31,35, .08) !important;
	
}

.diyeloption {
    font-size: 14px;
    padding: 10px 20px;
    position: relative;
    white-space: nowrap;
    overflow: initial;
    text-overflow: initial;
    color: #606266;
    height: 108px;
    line-height: 34px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
	border-bottom: 1px solid rgba(28, 31,35, .08) !important;
}




</style>
